<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/cube.css">
</head>

<body>

    <div class="cube">
        <div class="face front">front</div>
        <div class="face back">back</div>
        <div class="face left">left</div>
        <div class="face right">right</div>
        <div class="face top">top</div>
        <div class="face bottom">bottom</div>
    </div>
    <hr>
    <button id="start">开始</button>
    <button id="end">结束</button>
    <hr>
    <form action="">
        <label>0</label>
        <input type="range" min="0" max="202" value="0" id="oRange">
        <label>202</label>
    </form>
    <div class="stage">
        <section class="box" id="box">translateZ：0</section>
    </div>
    <script>
        let cube = document.querySelector('.cube');
        let rotatable = false;
        let x = 0;
        let y = 0;
        let cx = 0;
        let cy = 0;

        document.body.onmousedown = function(e) {
            cx = e.x;
            cy = e.y;
            rotatable = true
        }
        document.body.onmouseup = function() {
            rotatable = false
        }
        document.body.addEventListener('mousemove', function(e) {
            if (rotatable) {
                console.log(e)
                x += e.movementX;
                y += e.movementY

                cube.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`
            }

        })

        let start = document.getElementById('start');
        let end = document.getElementById('end');
        start.onclick = function() {
            cube.classList.add('active')
        };
        end.onclick = function() {
            cube.classList.remove('active')
        }


        var oRange = document.getElementById('oRange');
        var oBox = document.getElementById('box');
        var oShowArea = document.getElementById('show-area');
        oRange.oninput = function() {
            oBox.textContent = 'translateZ：' + this.value;
            oBox.style.cssText = 'transform: translateZ(' + this.value + 'px);';
        }
    </script>
</body>

</html>